// base
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
// redux
import { connect } from '@tarojs/redux'
import { DOREQUESTCHOOSEJOBTYPES } from './store/actions/pagechoosejobtypes'
import { UPDATEPAGECHOOSEJOBTYPES } from './store/types/pagechoosejobtypes'
// less
import './index.less'

import NetworkError from '../../components/taro-ui/network-error'
import BtmFixedBtn from '../../components/page-components/btm-fixed-btn'
import { navigateBack } from '../../crossplatform/apiservice/navigate'
import ScreenList from '../../components/page-components/screen-list'

const mapActiontoProps = dispatch => ({
  updateState(payload) {
    dispatch({
      type: UPDATEPAGECHOOSEJOBTYPES,
      payload: {
        ...payload
      }
    })
  }
})

@connect(
  ({ pagechoosejobtypes }) => ({
    ...pagechoosejobtypes
  }),
  mapActiontoProps
)
class ChooseJobTypes extends Component {
  config = {
    navigationBarTitleText: '岗位分类'
  }

  constructor(props) {
    super(props)
    this.state = {
      datalist: []
    }
  }

  componentWillMount() {
    // onLoad
    this.queryWrap()
  }

  componentDidMount() {
    // onready
  }

  componentDidShow() {
    // onshow
  }

  componentDidHide() {
    // onhide
  }

  componentWillUnmount() {
    // onUnload
  }

  queryWrap = () => {
    const { pagetype, values = '', practice } = this.$router && this.$router.params
    const type = pagetype === 'part-time' ? 0 : practice ? 2 : 1
    DOREQUESTCHOOSEJOBTYPES(type).then(({ datalist = [] }) => {
      datalist = datalist.map(e => {
        e.data = e.industryCategories
        delete e['industryCategories']
        e.data.map(item => {
          item.active = values === item.name
          return item
        })
        return e
      })
      let jobnew = {}
      if (pagetype === 'part-time') {
        jobnew = datalist
      } else {
        jobnew = datalist
      }
      this.setState({
        datalist: jobnew
      })
    })
  }

  onReload = () => {
    this.queryWrap()
  }

  delay(time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }

  onChooseChange = ({ cardIndex, titleIndex }) => {
    const { datalist } = this.state
    let dataNew = [...datalist]
    let chooseData = {}
    dataNew.map((itemData, indexData) => {
      let isThis = indexData === titleIndex
      itemData &&
        itemData.data &&
        itemData.data.map((item, index) => {
          if (cardIndex === index && isThis) {
            item.active = !item.active
            if (item.active) {
              chooseData = item
            } else {
              chooseData = {}
            }
          } else {
            item.active = false
          }
          return item
        })
    })
    this.setState({
      datalist: dataNew
    })
    this.props.updateState({
      chooseData
    })
  }

  submit() {
    navigateBack()
  }

  render() {
    const { datalist } = this.state
    return (
      <View className="ChooseJobTypes_id79946">
        <NetworkError visible={this.props.networkerror} onReload={this.onReload} />
        <View className={`ChooseJobTypes_id79946Wrap ${this.props.networkerror ? 'hide' : ''}`}>
          <ScreenList
            screenIndex={0}
            type="card"
            showTitle
            pagetype="postjob"
            dataSource={datalist}
            onTap={this.onChooseChange}
          />
        </View>
        <BtmFixedBtn text="确定" onTap={this.submit} />
      </View>
    )
  }
}

export default ChooseJobTypes
